<template>
	<view class="concent">
		<!-- 标题 -->
		<view class="title">
			约拍服务定制
		</view>
		<view class="type">
			<view class="laber">
				类型：
			</view>
			<view class="check_box">
				<u-checkbox-group v-model="checkboxValue4Type" @change="checkboxChange"
					style="flex-direction: row;flex-flow:wrap">
					<u-checkbox :customStyle="{margin: '8px'}" v-for="(item, index) in checkboxList4Type" :key="index"
						:label="item.name" :name="item.name" labelSize="16px" :disabled="item.disabled">
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		
		<view class="stylee">
			<view style="padding: 6px 0 0 8px;" class="">
				风格：
			</view>
			<view class="check_box">
				<u-checkbox-group v-model="checkboxValue4Style" @change="checkboxChange"
					style="flex-direction: row;flex-flow:wrap">
					<u-checkbox :customStyle="{margin: '8px'}" v-for="(item, index) in checkboxList4Style" :key="index"
						:label="item.name" :name="item.name" labelSize="16px" :disabled="item.disabled">
					</u-checkbox>
				</u-checkbox-group>
				
				<view>
					自定义：<input v-model="styleConsumer" placeholder="自定义风格" />
				</view>
			</view>
		</view>
		
		<!-- 选择男女 -->
		<view class="boy_girl">
			<view class="">
				摄像师性别&nbsp;:
				<view style="display: inline-block;justify-content: center;">
				  <u-radio-group
				    v-model="sex"
				    placement="row"
				    @change="groupChange"
				  >
				    <u-radio
				      :customStyle="{marginLeft: '25px'}"
				      v-for="(item, index) in sexList"
				      :key="index"
				      :label="item.name"
				      :name="item.name"
				      @change="radioChange"
				    >
				    </u-radio>
				  </u-radio-group>
				</view>
			</view>
		</view>
		
		<!-- 时间选择 -->
		<view class="timer">
			<view class="laber">
				时间&nbsp;:<view class="time_pickers" @click="this.show=true">
					{{time}}
				</view>
			</view>
			<u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" mode="datetime" :formatter="formatter"
				:closeOnClickOverlay="true" @confirm="confirms" @change="changes">
			</u-datetime-picker>
		</view>
		<!-- 预算 -->
		<view class="price">
			<view class="laber">
				预算&nbsp;:
				<view class="" style="display: inline-block;width: 80%;">
					<u-slider v-model="prcie" showValue='true' step="20" min="0" max="1000"></u-slider>
				</view>
			</view>
		</view>

		<!-- 预算 -->
		<view class="timer">
			<view class="">
				手动输入&nbsp;:
				<view style="display: inline-block;width: 70%;">
					<u--input fontSize='20' placeholder="请输入预算" border="bottom" clearable :value="prcie"></u--input>
				</view>
			</view>
		</view>
		<!-- 地址 -->
		<view class="address" >
			<view class="laber" >
				你的位置&nbsp;:
				<view class="check_box" style="font-size: 16px;">
					福建省龙岩学院领导世界的哈萨克就
				</view>
			</view>
		</view>
		<view class="btn">
			<u-button type="primary" size='large' shape="circle" @click="goPiPei" text="开始匹配"></u-button>
		</view>
		<tabber_my :current="2"></tabber_my>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				show: false,
				show_time: false,
				time: '点击选择时间',
				time_time: '点击选择日期',
				mode: 'range', //日期
				prcie: 0,
				sex:'',
				sexList:[{
					name: '男',
					disabled: false
				}, {
				    name: '女',
				    disabled: false
				}],
				value1: Number(new Date()),
				checkboxValue4Type: [],
				// 基本案列数据
				checkboxList4Type: [
					{
						name: '证件照',
						disabled: false
					},
					{
						name: '写真',
						disabled: false
					},
				],
				checkboxValue4Style: [],
				checkboxList4Style: [
					{
						name: '清新',
						disabled: false
					},
					{
						name: '闺蜜',
						disabled: false
					},
					{
						name: '甜美',
						disabled: false
					},
					{
						name: '日系',
						disabled: false
					},
					{
						name: '简约',
						disabled: false
					},
					{
						name: '酷炫',
						disabled: false
					},
				]
			}
		},
		methods: {
			//选择类型
			checkboxChange(n) {
				console.log('change', n);
			},
			//选择日期
			confirm_two(e) {
				console.log(e)
				this.time_time = e[0] +'至' +e[e.length - 1]
				this.show_time = false
			},
			//选择时间
			confirms(e) {
				console.log(e)
				let date = new Date(e.value)
				this.time = date.toLocaleString()
				this.show = false
			},
			goPiPei() {
				uni.navigateTo({
					url: '../../subPackages_pipei/works/works'
				})
			},
			//格式化时间
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
	}
</script>

<style lang="scss">
	.btn{
		margin-top: 20px;
	}
	.address{
		width: 98%;
		display: flex;
		flex-direction: row;
		background-color: white;
		margin-top: 10px;
	}
	.price {
		background-color: white;
		margin-top: 10px;
		height: 45px;
		padding-left: 8px;
		line-height: 25px;
	}
	.boy_girl{
		background-color: white;
		margin-top: 10px;
		height: 45px;
		padding-left: 8px;
		line-height: 45px;
	}
	.timer {
		background-color: white;
		margin-top: 10px;
		height: 45px;
		padding-left: 8px;
		line-height: 45px;
	}

	.laber {
		font-size: 16px;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 4px;
	}

	.check_box {
		flex: 3
	}

	.check_box {
		width: 100%;
	}

	.time_pickers {
		display: inline;
		font-size: 16px;
		color: #0055ff;
		margin-left: 15px;
	}

	.type {
		display: flex;
		flex-direction: row;
		background-color: white;
		padding-left: 8px;
	}
	
	.stylee {
		display: flex;
		margin-top: 10px;
		background-color: white;
		
		input {
			display: inline-flex;
			width: 135px;
			border-bottom: 1px solid;
		}
	}

	.concent {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.title {
		font-size: 22px;
		width: 100%;
		height: 60px;
		margin-bottom: 8px;
		line-height: 30px;
		display: flex;
		align-items: center;
		background-color: white;
		padding-left: 8px;
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		display: flex;
		justify-content: center;
	}
</style>